<template>
    <div class="page-wrap">
        <h2>基于qrcode和element-ui开发的二维码组件，支持预览</h2>
        <h3>第三方依赖</h3>
        <div>
            <span>qrcode：</span>
            <a href="https://www.npmjs.com/package/qrcode" target="_blank" rel="noopener noreferrer">官方文档</a>
            <span style="margin-left: 50px;">element-ui：</span>
            <a href="https://element.eleme.cn/#/zh-CN/component/quickstart" target="_blank" rel="noopener noreferrer">官方文档</a>
        </div>
        <h3>基本使用</h3>

        <div>
            <el-input type="textarea" :rows="4" placeholder="请输入内容" :value="code">
            </el-input>
        </div>
        <h3>参数</h3>
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="name" label="参数" width="180">
            </el-table-column>
            <el-table-column prop="type" label="数据类型" width="180">
            </el-table-column>
            <el-table-column prop="description" label="说明">
            </el-table-column>
        </el-table>
        <h3 style="color: #409EFF;">效果</h3>
        <div>
            <el-qrcode :value="value"></el-qrcode>
        </div>
        <h3 style="color: #409EFF;">点击预览</h3>
        <div>
            <!-- 可预览 -->
            <el-qrcode :value="value" preview></el-qrcode>
        </div>
    </div>
</template>


<script>
import elQrcode from '@/components/el-qrcode.vue'

export default {
    components: {
        elQrcode
    },
    data() {
        return {
            value: "123456",
            code: `<!-- 默认 -->
<el-qrcode value='123456'></el-qrcode>
<!-- 可预览 -->
<el-qrcode value='123456' preview></el-qrcode>`,
            tableData: [
                {
                    name: "value", type: "String",
                    description: "二维码的值"
                },
                {
                    name: "size", type: "Number",
                    description: "二维码默认展示的尺寸，默认200"
                },
                {
                    name: "preview", type: "Boolean",
                    description: "可否点击弹窗预览，默认false"
                },
                {
                    name: "previewSize", type: "Number",
                    description: "预览后弹窗展示的尺寸，默认400"
                }
            ]
        }
    }
}
</script>

<style scoped>
.page-wrap {
    padding: 20px;
}
.page-wrap h2{
    margin-top: 0;
}
</style>
